{% extends 'base.html' %}
{% load static %}
{% block title %}
    首页
{% endblock %}
{% block style %}
    <style>
        .main {
            width: 1140px;
            min-height: 100vh;
            margin: 10px auto;
            padding: 0 16px;
        }

        #type {
            margin: 30px 50px 20px 50px;
        }

        .types {
            margin: 5px 5px 3px 5px;
            white-space: nowrap;
            display: inline-block;
            font-size: 14px;
            color: #66bbc3;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend id="title">{{ type_title.type }}</legend>
        </fieldset>

        <div id="type">
        <span>
            {% for type in product_types %}
                <a id="types" class="types" href="/index/{{ type.id }}"> {{ type.type }}</a>
            {% endfor %}
        </span>
        </div>
        <div class="" style="padding: 30px;">


            <div class="layui-row layui-col-space15">
                {% for product in products %}
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <a href="/product/{{ product.id }}">
                                <div class="layui-card-header" style="text-align: center">{{ product.title }}</div>
                                <div class="layui-card-body">
                                    <img style="width: 315px; height: 300px"
                                         src="/media/{{ product.first_image }}"
                                         alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}